<template>
	<div>
		<el-button size="small" @click="add">添加</el-button>
		<el-table :data="supplierContacts" border style="width: 600px;">
			<el-table-column prop="name" label="名称" width="80">
			</el-table-column>
			<el-table-column prop="mobile" label="手机号" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="address" label="地址" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="投资比例">
				<template slot-scope="scope">
					<span>{{scope.row.proportion | proportion}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="remark" label="备注" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button size="small" @click="viewItem(scope.$index)" icon="el-icon-edit"></el-button>
					<el-button size="small" @click="deleteItem(scope.$index)" type="danger" icon="el-icon-delete"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="添加联系人" :visible.sync="dialogTableVisible">
			<el-form ref="addData" :model="addData" status-icon :rules="addRules" label-width="20%" class="add-data">
				<el-form-item label="姓名" prop="name">
					<el-input size="small" v-model="addData.name"></el-input>
				</el-form-item>
				<el-form-item label="手机" prop="mobile">
					<el-input size="small" type="number" v-model="addData.mobile"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<city-three v-on:sendCityData="getCityData"></city-three>
				</el-form-item>
				<el-form-item label="投资人比例(%)" prop="proportion">
					<el-input size="small" type="number" v-model="addData.proportion"></el-input>
				</el-form-item>
				<div v-if="showBank">
				<el-form-item label="持卡人姓名" prop="cardName">
					<el-input size="small" v-model="addData.cardName"></el-input>
				</el-form-item>
				<el-form-item label="银行名称" prop="bankCardName">
					<el-input size="small" v-model="addData.bankCardName"></el-input>
				</el-form-item>
				<el-form-item label="开户行名称" prop="bankName">
					<el-input size="small" v-model="addData.bankName"></el-input>
				</el-form-item>
				<el-form-item label="银行卡号" prop="bankCardNumber">
					<el-input size="small" v-model="addData.bankCardNumber"></el-input>
				</el-form-item>
				</div>
				<el-form-item label="备注">
					<el-input size="small" v-model="addData.remark"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button v-if="edit" size="small" type="primary" @click="updatePerson('addData')">立即修改</el-button>
					<el-button v-else size="small" type="primary" @click="addPerson('addData')">立即添加</el-button>
					<el-button size="small" @click="dialogTableVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import cityThree from "./cityThree.vue";
	import axios from 'axios';
	export default {
		data() {
			return {
				edit:false,
				editIndex : '',
				showBank:false,
				dialogTableVisible: false,
				addData: {
					id:1,
					name: '',
					mobile: "",
					address: "",
					proportion: '',
					remark: "", //
					cardName: "", //"张飞飞",
					bankName: "", //"开户行",
					bankCardNumber: "", //"卡号",
					bankCardName: "", //"银行名称"
				},
				supplierContacts: [],
				addRules: {
					name: [{
						required: true,
						message: '供应商联系人名称不能为空',
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						message: '电话不能为空',
						trigger: 'blur'
					}],
					proportion: [{
						required: true,
						message: '投资人比例不能为空',
						trigger: 'blur'
					}],
					cardName: [{
						required: true,
						message: '持卡人姓名不能为空',
						trigger: 'blur'
					}],
					bankName: [{
						required: true,
						message: '开户行名称不能为空',
						trigger: 'blur'
					}],
					bankCardNumber: [{
						required: true,
						message: '银行卡号不能为空',
						trigger: 'blur'
					}],
					bankCardName: [{
						required: true,
						message: '银行名称不能为空',
						trigger: 'blur'
					}],

				},
			}
		},
		props: {
			sendUpdateData: "",
			type:''
		},
		watch: {
			sendUpdateData() {
				this.supplierContacts = this.sendUpdateData;
			},
			type(){
				this.showBank = this.type == 'INVESTOR' ? true :false;
			}
		},
		mounted() {
		},
		components: {
			cityThree
		},
		filters: {
			proportion: function(value) {

				return(value / 100).toFixed(2) + "%";
			}
		},
		methods: {

			// 删除单个联系人
			deleteItem(index) {
				this.supplierContacts.splice(index, 1);
			},
			viewItem(index){
				this.editIndex = index;
				this.addData = this.supplierContacts[index];
				this.addData.proportion /= 100;
				this.dialogTableVisible = true;
				this.edit = true;
			},
			// 添加联系人（打开添加框）
			add() {
				this.dialogTableVisible = true;
			},
			// 获取子组件（省市区）数据
			getCityData(data) {
				this.addData.address = data;
			},
			// 添加联系人
			addPerson(addData) {
				this.$refs[addData].validate(valid => {
					if(valid) {
						this.addData.proportion *= 100;
						this.supplierContacts.push(this.addData);
						this.dialogTableVisible = false;
						this.sendData();
					} else {
						this.$msg.error("网络或服务器错误");
					}
				});
			},
			//修改联系人
			updatePerson(addData){
				this.$refs[addData].validate(valid => {
					if(valid) {
						this.addData.proportion *= 100;
						this.supplierContacts[this.editIndex] = this.addData;
						this.dialogTableVisible = false;
						this.edit = false;
						this.sendData();
					} else {
						this.$msg.error("网络或服务器错误");
					}
				});
			},
			// 发送数据给父组件
			sendData() {
				this.$emit('sendPersonData', this.supplierContacts);
				this.clear();
			},
			clear() {
				this.addData = {
					name: '',
					mobile: "",
					address: "",
					proportion: '',
					remark: "",
				};
				this.ctrlDialog = false;
				this.dialogTableVisible = false;
			}
		},
	}
</script>
<style lang="less">

</style>